<template>
  <page-wrap hide-tab back :title="pageTitle" bgColor="transparent">
    <view class="search">
      <view class="search-option" :style="'padding-top:' + navHeight + 'px;'">
        <view class="search-wrap">
          <view class="search-input">
            <image :src="srhIcon"></image>
            <input
              v-model="filter.keyword"
              type="text"
              placeholder="请输入公司/职位关键字"
              confirm-type="搜索"
              placeholder-class="placeholder"
              @confirm="handleSearch(false)"
            />
            <view
              v-if="filter.keyword"
              class="btn btn-search"
              @click="handleSearch(false)"
              >搜索</view
            >
          </view>
        </view>
        <view class="search-filter">
          <!-- <view v-if="optRegion == '深圳市'" class="sz-region">深圳市</view> -->
          <u-dropdown
            :active-color="activeColor"
            :inactive-color="inactiveColor"
            height="88"
            menu-icon="arrow-down-fill"
            menu-icon-size="12"
            title-size="24"
            ref="filter"
            @open="open"
          >
            <block v-for="(item, index) in filterList" :key="index">
              <u-dropdown-item
                v-model="filter[item.prop]"
                :title="item.activeName || item.name"
                :options="item.data"
                @change="handleFilter($event, item, index)"
                v-if="!item.component"
                height="50vh"
              >
              </u-dropdown-item>
              <u-dropdown-item :title="item.activeName || item.name" v-else>
                <region-filter
                  class="filter-comp"
                  v-if="item.component === 'RegionFilter'"
                  :form-data="filter[item.prop]"
                  :prop-list="item.propList"
                  @confirm="handleConfirm(arguments, 0)"
                ></region-filter>
                <trade-filter
                  class="filter-comp"
                  v-if="item.component === 'TradeFilter'"
                  :form-data="[item.activeParent, filter[item.prop]]"
                  :prop-list="item.propList"
                  @confirm="handleConfirm(arguments, 1)"
                ></trade-filter>
                <more-filter
                  v-if="item.component === 'MoreFilter'"
                  :isMachine="isMachine"
                  @filter="handleComFilter"
                  @reset="handleReset"
                ></more-filter>
              </u-dropdown-item>
            </block>
          </u-dropdown>
        </view>
      </view>
      <scroll-view
        class="search-list"
        :scroll-y="true"
        @scrolltolower="handleMore"
      >
        <view class="special-function" v-if="advItems && advItems.length && isFromEnterprisesActivityHoverBtn">
          <u-swiper height="140" name="path" interval="4000" :list="advItems" mode="none" @click="handleBannerLive"></u-swiper>
        </view>

        <job-list
          class="post-list"
          v-if="postList.length"
          :data="postList"
          :props="postProp"
          :status="moreLoading"
          @item-click="handleJobItem"
          :showJDConsultant="false"
          :isEnterprisesActivityItem="isFromEnterprisesActivityHoverBtn"
        ></job-list>
        <u-empty
          text="暂无内容"
          :src="emptyImg"
          icon-size="378"
          color="#000000"
          font-size="32"
          margin-top="-80"
          v-else
        ></u-empty>
      </scroll-view>
    </view>

    <OfferInfoPopup hasbtn="false" :show="isShowOfferInfoPopup" @close="isShowOfferInfoPopup=false"></OfferInfoPopup>
  </page-wrap>
</template>

<script>
import RegionFilter from "@/components/RegionFilter";
import TradeFilter from "../../components/TradeFilter";
import MoreFilter from "./components/MoreFilter";
import JobList from "@/components/JobList";
import OfferInfoPopup from "./components/OfferInfoPopup";
import { salaryList } from "@/utils/data";
import { searchZp } from "@/api/index";
import ShareMixin from "@/mixins/share";
export default {
  mixins: [ShareMixin],
  components: {
    RegionFilter,
    TradeFilter,
    MoreFilter,
    JobList,
    OfferInfoPopup,
  },
  data() {
    return {
      activeColor: this.$primaryColor,
      inactiveColor: "#555555",
      srhIcon: this.$imgBase + "home/search.png",
      emptyImg: this.$imgBase + "empty.png",
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      filter: {
        region: this.$regionId,
        trade: null,
        salary: null,
        keyword: "",
      },
      filterList: this.$needTrade
        ? [
            {
              name: this.$regionName || "地区",
              component: "RegionFilter",
              prop: "region",
              propList: ["region"],
            },
            {
              name: "行业",
              component: "TradeFilter",
              prop: "trade",
              propList: ["trade"],
              activeParent: "1000",
            },
            {
              name: "月薪",
              prop: "salary",
              data: salaryList,
            },
            {
              name: "更多",
              component: "MoreFilter",
            },
          ]
        : [
            {
              name: this.$regionName || "地区",
              component: "RegionFilter",
              prop: "region",
              propList: ["region"],
            },
            {
              name: "月薪",
              prop: "salary",
              data: salaryList,
            },
            {
              name: "更多",
              component: "MoreFilter",
            },
          ],
      postList: [],
      postProp: {
        title: "jtzw",
        salary: "xzdy_new",
        cname: "cname_all",
        time: "updatetime",
        region: "regionname",
        fldy: "fldy",
        gznum: "gznum",
        edus: "edus",
        jobtypes: "jobtypes",
      },
      pageParam: {
        page: 0,
        pageSize: 20,
      },
      navHeight: 0,
      sharePath: "/pagesSub/index/search/index",
      optRegion: "",
      isMachine: false, // 一览就业机

      isShowOfferInfoPopup: false,
      isFromEnterprisesActivityHoverBtn: false, // 是否来自名企汇活动按钮
      pageTitle: "搜索",
      advItems: [
        {
          path:this.$imgBase + "offerpai/adv2.png",
        }
      ],
    };
  },
  onLoad(opt) {
    this.filter.keyword = opt.jobName;
    if (opt.region == "深圳市") {
      this.filter.region = "440300";
      this.optRegion = "深圳市";
      this.isMachine = true;
      this.filterList[0].name = "深圳市";
      this.$set(this.filter, 'exp', '-1||0'); // 应届生
    }

    if (opt.form === "enterprisesActivityHoverBtn") {
      this.isFromEnterprisesActivityHoverBtn = true;
      this.pageTitle = "国央企机会";
      this.sharePath = "/pagesSub/index/search/index?form=enterprisesActivityHoverBtn";
    }
  },
  created() {
    // #ifdef MP-WEIXIN
    this.navHeight = getApp().globalData.navHeight;
    // #endif
  },
  mounted() {
    uni.onWindowResize((res) => {
      plus.key.hideSoftKeybord();
    });

    this.handleSearch();
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  methods: {
    open(index) {
      if (index == 0 && this.isMachine) {
        this.$refs.filter.close();
      }
    },
    blockHandleClick(index) {
      console.log("index", index);
    },
    handleSearch(isMore) {
      if (
        isMore &&
        (this.moreLoading == "loading" || this.moreLoading == "nomore")
      )
        return;
      if (isMore) {
        this.$set(this.pageParam, "page", this.pageParam.page + 1);
      } else {
        this.$set(this.pageParam, "page", 0);
        this.postList = [];
      }
      this.moreLoading = "loading";

      // 一览就业机默认参数 深圳+应届生
      if (this.isMachine) {
        this.filter.region = "440300";
        this.filterList[0].name = "深圳市";
        this.$set(this.filter, 'exp', '-1||0'); // 应届生
      }

      let queryItem = {
        jtzw: this.filter.keyword || "",
        regionid: this.filter.region || "",
        salary: this.filter.salary || "",
        gznum: this.filter.exp || "",
        itime_num: this.filter.time || "",
        eduId: this.filter.edu || "",
        jobtypes: this.filter.type || "",
        isMachine: this.isMachine,
      };
      // 应届生
      if (this.filter.exp == "-1||0") {
        queryItem.search_yjs = 1;
        queryItem.gznum = "";
      } else if (this.filter.exp) {
        queryItem.rctypes = "1";
      }
      let param = {
        tradeid: this.filter.trade || this.$tradeId,
        queryItemArr: JSON.stringify(queryItem),
        conditionArr: JSON.stringify({
          page: this.pageParam.page,
          page_size: this.pageParam.pageSize,
          isStateCompany: this.isFromEnterprisesActivityHoverBtn ? 1 : 0, // 是否国央企
        }),
      };

      searchZp(param).then((res) => {
        if (isMore) {
          this.postList.push(...(res.data || []));
        } else {
          this.postList = res.data || [];
        }
        if (res.data) {
          this.moreLoading = "loadmore";
          if (this.pageParam.page >= res.pageparam.pages) {
            this.moreLoading = "nomore";
          }
        } else {
          this.moreLoading = "nomore";
        }
      });
    },
    handleFilter(e, item, index) {
      let data = item.data.find((ele) => ele.value === e);
      let activeName = data.value ? data.name : item.name;
      this.$set(this.filterList[index], "activeName", activeName);
      this.$set(this.filter, item.name, activeName);
      this.handleSearch();
    },
    handleConfirm([data, name], index) {
      if (Array.isArray(name) && Array.isArray(data)) {
        this.$set(this.filter, name[0], data[0]);
        this.$set(this.filterList[index], "activeName", data[1]);
        if (index) {
          this.$set(this.filterList[index], "activeParent", data[2]);
        }
      } else {
        this.$set(this.filter, name, data);
      }
      this.$refs.filter.close();
      this.handleSearch();
    },
    handleComFilter(data) {
      this.filter = { ...this.filter, ...data };
      this.$refs.filter.close();
      this.handleSearch();
    },
    handleReset() {
      this.filter = {
        region: null,
        trade: null,
        salary: null,
        keyword: "",
      };
      this.filterList = this.$needTrade
        ? [
            {
              name: "地区",
              component: "RegionFilter",
              prop: "region",
              propList: ["region"],
            },
            {
              name: "行业",
              component: "TradeFilter",
              prop: "trade",
              propList: ["trade"],
              activeParent: "1000",
            },
            {
              name: "月薪",
              prop: "salary",
              data: salaryList,
            },
            {
              name: "更多",
              component: "MoreFilter",
            },
          ]
        : [
            {
              name: "地区",
              component: "RegionFilter",
              prop: "region",
              propList: ["region"],
            },
            {
              name: "月薪",
              prop: "salary",
              data: salaryList,
            },
            {
              name: "更多",
              component: "MoreFilter",
            },
          ];
      this.handleSearch();
    },
    handleMore() {
      this.handleSearch(true);
    },
    handleJobItem(item) {
      uni.navigateTo({
          url: "/pagesSub/public/jobDetail/index?jobId=" + item.id,
        });
    },

    handleBannerLive(index) {
      console.log("🚀 ~ handleBannerLive ~ index:", index)
      this.isShowOfferInfoPopup = true;
    },
  },
};
</script>

<style lang="scss">
@include img-base-self(".search .search-option", "home/top_bg.png");

.search {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 1rpx;
  .search-option {
    flex-shrink: 0;
    .search-wrap {
      padding: 32rpx;
      // background: $uni-bg-color;
      .search-input {
        display: flex;
        align-items: center;
        padding: 0 4rpx 0 44rpx;
        height: 80rpx;
        background: $uni-bg-color;
        border-radius: 40rpx;
        image {
          flex-shrink: 0;
          margin-right: 16rpx;
          margin-top: 2rpx;
          width: 44rpx;
          height: 44rpx;
        }
        input {
          flex: 1;
          height: 100%;
          font-size: $uni-font-size-base;
          color: #333333;
        }
        &::placeholder,
        .uni-input-placeholder,
        ::v-deep .placeholder {
          color: #999;
        }
        .btn-search {
          padding: 16rpx 32rpx;
          line-height: 38rpx;
          color: #fff;
          border-radius: 40rpx;
          background: linear-gradient(315deg, #ff5637 0%, #ff7f4e 100%);
        }
      }
    }
    .search-filter {
      display: flex;
      .sz-region {
        background: #ffffff;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      ::v-deep .u-dropdown {
        background: $uni-bg-color;
        .u-dropdown__menu__item__text {
          display: inline-block;
          max-width: 100rpx;
          color: $uni-text-color-555 !important;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .u-dropdown__menu__item__arrow {
          margin-top: 2rpx !important;
          margin-left: 8rpx !important;
          .u-icon__icon {
            color: $uni-text-color-222 !important;
          }
        }
      }
      ::v-deep .region-filter,
      ::v-deep .street-wrap,
      ::v-deep .trade-filter {
        max-height: 60vh;
      }
    }
  }
  .search-list {
    flex-grow: 1;
    height: 1rpx;
    ::v-deep .job-list {
      padding: 24rpx 32rpx;
      box-sizing: border-box;
    }
  }

  .special-function {
    width: 100%;
    border-radius: 40rpx;
    padding: 20rpx 32rpx 0 32rpx;
  }
}
</style>
